import React, { useCallback, useEffect } from 'react';
import type { DropTargetMonitor } from 'react-dnd';
import { useDrop } from 'react-dnd';
import { useDispatch, useSelector, connect } from 'react-redux';
import { RootDispatch, RootState } from '@/store';
import { TABLE_VAR_FIST_STR } from '@/consts';
import { leftDatas } from '../../datas';
import styles from './index.module.less';
import { ExcelDemoStore } from '../../models/printReport.model';

const { luckysheet } = window;

class Context extends React.Component<any> {
  componentDidMount(): void {
    console.log('this.props.lucksheetOptions', luckysheet.eventCenter);

    luckysheet.create({
      ...this.props.lucksheetOptions,
      hook: {
        cellDragStop: this.onDragStop,
      },
    });
  }

  // 鼠标拖拽表格内事件
  onDragStop = (cell, position, sheet, moveState, ctx) => {
    const { r, c, start_r, start_c, end_r, end_c } = position;
    const { title, ...propsData } = this.props.selectData;
    console.log('propsData', propsData);

    // 设置
    if (title) {
      luckysheet.setCellValue(r, c, {
        m: `${TABLE_VAR_FIST_STR}{${title}}`,
        ct: {
          fa: 'General',
          t: 'g',
        },
        v: propsData,
      });
    }

    this.props.updateState({
      selectedStatus: 'none',
      // selectData: {},
    });
  };

  render() {
    return (
      <div className={styles.excelWrap}>
        {/* <div ref={drop} className={styles.context}></div> */}
        <div
          id="luckysheet"
          className={styles.luckySheet}
          style={{
            height: '60vh',
          }}
        ></div>
      </div>
    );
  }
}
// hook在表格组件内，无法获取最新值，如果监听此参数，将重新绘制canvas(销毁>更新页面)
// const Context = () => {
//   const excelDemoStore = useSelector<RootState, ExcelDemoStore>((state) => state.printReport);
//   const dispatch = useDispatch<RootDispatch>();
//   const [{ isOver, draggingColor, canDrop }, drop] = useDrop(
//     () => ({
//       accept: leftDatas.map((item) => item.type),
//       // 接收拖拽至容器后的数据
//       drop(_item, monitor) {
//         console.log('_item', _item);
//         return undefined;
//       },
//       collect: (monitor: DropTargetMonitor) => ({
//         isOver: monitor.isOver(),
//         canDrop: monitor.canDrop(),
//         draggingColor: monitor.getItemType() as string,
//       }),
//     }),
//     [],
//   );

//   // 鼠标拖拽表格内事件
//   const onDragStop = (cell, position, sheet, moveState, ctx) => {
//     const { r, c, start_r, start_c, end_r, end_c } = position;
//     const { title, props } = excelDemoStore.selectData;
//     console.log('excelDemoStore.selectData', excelDemoStore.selectData);

//     // 设置
//     title &&
//       luckysheet.setCellValue(r, c, {
//         m: `@{${title}}`,
//         ct: {
//           fa: 'General',
//           t: 'g',
//         },
//         v: props,
//       });
//     // await dispatch.printReport.updateState({
//     //   selectedStatus: 'none',
//     //   selectData: {},
//     // });
//   };

//   useEffect(() => {
//     luckysheet.create({
//       container: 'luckysheet', // luckysheet为容器id
//       title: 'Luckysheet Demo', // 设定表格名称
//       lang: 'zh', // 设定表格语言
//       showinfobar: false, // 顶部信息
//       showsheetbar: false, // sheet
//       showtoolbar: true, // 隐藏工具栏
//       // 自定义显示工具栏
//       showtoolbarConfig: {
//         undoRedo: true,
//         font: true,
//       },
//       hook: {
//         cellDragStop: onDragStop,
//       },
//       data: [
//         {
//           name: 'Sheet1',
//           color: '',
//           index: 0,
//           status: 0,
//           order: 1,
//           celldata: [],
//           config: {},
//         },
//       ],
//     });
//     return () => {
//       luckysheet.destroy();
//     };
//   }, []);

//   return (
//     <div className={styles.excelWrap} ref={drop}>
//       {/* <div ref={drop} className={styles.context}></div> */}
//       <div
//         id="luckysheet"
//         className={styles.luckySheet}
//         style={{
//           height: '60vh',
//         }}
//       ></div>
//     </div>
//   );
// };

export default connect(
  ({ printReport }) => ({
    ...printReport,
  }),
  ({ printReport }) => ({
    ...printReport,
  }),
)(Context);
